import React, { useState } from 'react';
import { Button, Card, Table } from 'antd';
import { vipLabelMap, vipColorMap } from '@/enums/vip.enum';

import type { TableColumnsType } from 'antd';
import type { VipValueType } from '@/types/vip.type';
import type { VipInfoType, BindInfoType, DataType } from '../types/index.type';

const columns: TableColumnsType<DataType> = [
  {
    title: '会员信息',
    dataIndex: 'vipInfo',
    render: (vipInfo: VipInfoType) => {
      return (
        <div className="flex items-center">
          <img src={vipInfo.avatar} alt="productImage" className="w-30 h-30 rounded-15" />
          <div className="flex-1 ml-8">
            <div>{vipInfo.name}</div>
            <div>{vipInfo.vipNumber}</div>
          </div>
        </div>
      );
    },
  },
  {
    title: '会员类型',
    dataIndex: 'vipType',
    render: (vipType: VipValueType) => {
      return <div style={{ color: vipColorMap[vipType] }}>{vipLabelMap[vipType]}</div>;
    },
  },
  { title: '会员生日', dataIndex: 'birthdayMonth' },
  { title: '联系电话', dataIndex: 'phoneNumber' },
  { title: '开卡日期', dataIndex: 'openingTime' },
  {
    title: '公众号',
    dataIndex: 'isFollow',
    render: isFollow => (isFollow ? '已关注' : '未关注'),
  },
  {
    title: '绑定导购/店铺',
    dataIndex: 'bindInfo',
    render: (bindInfo: BindInfoType) => {
      return (
        <>
          <div>{bindInfo.shopAssistantName}</div>
          <div>{bindInfo.shopName}</div>
        </>
      );
    },
  },
  { title: 'ERP老会员', dataIndex: 'isErp', render: isErp => (isErp ? '是' : '否') },
  {
    title: '操作',
    key: 'action',
    render: () => (
      <Button type="link" className="p-0">
        解绑
      </Button>
    ),
  },
];

const data: DataType[] = [];
for (let i = 0; i < 56; i++) {
  data.push({
    key: i,
    vipInfo: {
      avatar: `https://picsum.photos/30/30?random=${+new Date() + Math.random()}`,
      name: '胖虎',
      vipNumber: `VIPBH${+new Date() + Math.ceil(Math.random() * 1000)}`,
    },
    vipType: Math.floor(Math.random() * 7) as VipValueType,
    birthdayMonth: '11月04日',
    phoneNumber: '17500006868',
    openingTime: '2022-08-30',
    isFollow: Boolean(i % 3),
    bindInfo: { shopAssistantName: '小阿Giao', shopName: '一给我里Giao店铺' },
    isErp: Boolean(i % 2),
  });
}

const TableCard = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  return (
    <Card className="mt-16">
      <div>
        <Button type="primary" className="bg-primary-color">
          批量解绑
        </Button>
      </div>
      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={data}
        pagination={{
          pageSize: 5,
          showQuickJumper: true,
          onShowSizeChange: (current, size) => {
            console.log('🚀 ~ TableCard ~ current, size:', current, size);
          },
        }}
        className="mt-8"
      />
    </Card>
  );
};

export default TableCard;
